<template>
  <div class="cinema-detail-page">
    <AppHeader />
    
    <div class="cinema-container">
      <!-- 影院基本信息 -->
      <div class="cinema-basic-info">
        <div class="cinema-name">
          <h1>{{ cinemaInfo.name }}</h1>
          <div class="cinema-tags">
            <span v-if="cinemaInfo.hasImax" class="tag">IMAX厅</span>
            <span v-if="cinemaInfo.has3d" class="tag">3D</span>
            <span v-if="cinemaInfo.hasVip" class="tag">VIP厅</span>
            <span v-for="(tag, index) in cinemaInfo.tags" :key="index" class="tag">{{ tag }}</span>
          </div>
        </div>
        <div class="cinema-address">
          <span class="address-text">{{ cinemaInfo.address }}</span>
          <a :href="mapUrl" target="_blank" class="map-link"></a>
        </div>
        <div class="cinema-phone">电话：{{ cinemaInfo.phone || '暂无' }}</div>
      </div>
      <!-- 影片场次列表 -->
      <div class="movie-schedule">
        <div class="date-selector">
          <div 
            v-for="date in dates" 
            :key="date.value"
            :class="['date-item', { active: selectedDate === date.value }]"
            @click="selectDate(date.value)"
          >
            <span class="day">{{ date.day }}</span>
            <span class="date">{{ date.date }}</span>
          </div>
        </div>

        <div class="movie-list">
          <div v-for="movie in movies" :key="movie.id" class="movie-item">
            <div class="movie-basic">
              <img :src="BASE_URL + movie.posterUrl" :alt="movie.movieName" class="movie-poster">
              <div class="movie-info">
                <h3 class="movie-name">{{ movie.movieName }}</h3>
                <div class="movie-stats">
                  <span class="rating" v-if="movie.rating">评分：{{ movie.rating }}</span>
                  <span class="duration">{{ movie.durationMinutes }}分钟</span><br>
                  <span class="duration">上映时间：{{ movie.time }}</span>
                </div>
              </div>
              <div class="buy-button-container">
                <button class="buy-btn" @click="handleBuyTicket(movie)">
                  选座购票
                </button>
              </div>
            </div>

            <div class="schedule-list">
              <div v-for="schedule in movie.schedules" :key="schedule.id" class="schedule-item">
                <div class="time-info">
                  <span class="start-time">{{ schedule.time }}</span>
                  <span class="end-time">{{ schedule.endTime }}</span>
                </div>
                <div class="hall-info">
                  <span class="hall-name">{{ schedule.hallName }}</span>
                  <span class="language">{{ schedule.language }}</span>
                </div>
                <div class="price-info">
                  <span class="price">¥{{ schedule.price }}</span>
                  <button class="buy-btn" @click="handleBuy(schedule)">选座购票</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AppHeader from '@/components/AppHeader.vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const cinemaId = route.params.id
const cinemaInfo = ref({})
const movies = ref([])
const selectedDate = ref('')
const dates = ref([])

// 生成日期选择器的数据
const generateDates = () => {
  const today = new Date()
  const dateList = []
  for (let i = 0; i < 7; i++) {
    const date = new Date(today)
    date.setDate(today.getDate() + i)
    dateList.push({
      value: date.toISOString().split('T')[0],
      day: i === 0 ? '今天' : i === 1 ? '明天' : getWeekDay(date),
      date: `${date.getMonth() + 1}月${date.getDate()}日`
    })
  }
  dates.value = dateList
  selectedDate.value = dateList[0].value
}

const getWeekDay = (date) => {
  const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  return weekDays[date.getDay()]
}

// 获取影院信息
const getCinemaInfo = async () => {
    console.log("影院ID：", cinemaId)
  try {
    const response = await axios.get(BASE_URL+"/v1/cinemas/select?id="+cinemaId)
    if (response.data.code === 2000) {
      cinemaInfo.value = response.data.data[0]
      console.log("影院信息：")
      console.log( cinemaInfo.value)
    } else {
      ElMessage.error(response.data.msg || '获取影院信息失败')
    }
  } catch (error) {
    console.error('获取影院信息失败:', error)
    ElMessage.error('获取影院信息失败')
  }
}

// 获取排片信息
const getSchedules = async () => {
  try {
    console.log("正在请求排片信息，参数：", {
      cinemaId,
      date: selectedDate.value
    })

    const response = await axios.get(`${BASE_URL}/v1/scheduling/selectshijian`, {
      params: {
        cinemaId,
        date: selectedDate.value
      }
    })
    console.log("完整的响应对象：", response)

    if (response.data.code === 2000) {
      // 确保数据存在
      if (response.data.data && Array.isArray(response.data.data)) {
        movies.value = response.data.data
        console.log("处理后的电影数据：", movies.value)
      } else {
        console.log("当前日期没有排片信息")
        movies.value = [] // 清空数据
      }
    } else {
      console.error('接口返回错误:', response.data.msg)
      ElMessage.warning('暂无排片信息')
    }

  } catch (error) {
    console.error('详细错误信息:', {
      message: error.message,
      response: error.response,
      config: error.config
    })
    ElMessage.error(`获取排片信息失败: ${error.message}`)
  }
}

// 选择日期
const selectDate = (date) => {
  selectedDate.value = date
  getSchedules()
}

// 购票
const handleBuy = (schedule) => {
  console.log('选择的场次信息:', schedule) // 调试用
  router.push({
    name: 'seat-selection',
    query: {
      movieId: schedule.movieId,
      cinemaId: cinemaId,
      hallId: schedule.hallId,
      scheduleId: schedule.id,
      price: schedule.price // 添加价格信息
    }
  })
}

const handleBuyTicket = (movie) => {
  router.push({
    name: 'seat-selection',
    query: {
      movieId: movie.movieId,
      cinemaId: cinemaId,
      hallId: movie.hallId,
      scheduleId: movie.id
    }
  })
}

onMounted(() => {
  generateDates()
  getCinemaInfo()
  getSchedules()
})
</script>

<style scoped>
.cinema-detail-page {
  background: #f4f4f4;
  min-height: 100vh;
}

.cinema-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.cinema-basic-info {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.cinema-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.cinema-name h1 {
  font-size: 24px;
  margin: 0;
}

.cinema-tags {
  display: flex;
  gap: 8px;
}

.tag {
  padding: 2px 8px;
  background: #f5f5f5;
  color: #666;
  font-size: 12px;
  border-radius: 2px;
}

.cinema-address {
  color: #666;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.map-link {
  color: #1890ff;
  text-decoration: none;
}

.cinema-phone {
  color: #666;
}

.date-selector {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.date-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 20px;
  cursor: pointer;
  border-radius: 4px;
}

.date-item.active {
  background: #ff5f16;
  color: #fff;
}

.movie-list {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

.movie-item {
  border-bottom: 1px solid #f0f0f0;
  padding: 20px 0;
}

.movie-basic {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.movie-poster {
  width: 120px;
  height: 160px;
  border-radius: 4px;
}

.movie-info {
  flex: 1;
}

.movie-name {
  font-size: 18px;
  margin: 0 0 10px;
}

.movie-stats {
  color: #666;
  font-size: 14px;
}

.schedule-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

.schedule-item {
  border: 1px solid #f0f0f0;
  padding: 15px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.schedule-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.time-info {
  margin-bottom: 10px;
}

.start-time {
  font-size: 20px;
  color: #333;
  font-weight: bold;
  margin-right: 10px;
}

.end-time {
  font-size: 12px;
  color: #999;
}

.hall-info {
  margin: 8px 0;
  font-size: 14px;
  color: #666;
  display: flex;
  gap: 10px;
}

.hall-name {
  color: #333;
}

.language {
  color: #666;
}

.price-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.price {
  color: #ff5f16;
  font-size: 18px;
  font-weight: bold;
}

.buy-button-container {
  margin-left: auto;
  padding-right: 20px;
}

.buy-btn {
  background: #ff5f16;
  color: white;
  border: none;
  padding: 8px 24px;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 16px;
}

.buy-btn:hover {
  background: #ff4d00;
}

.buy-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
}
</style> 